@charset "utf-8";
/* CSS Document */
*{
	margin :0;/*外边距*/
	padding:0;/*内边距*/
	font-family:'Poppins',sans-serif;/*字体*/
}

.登录盒子{
	position:absolute;
	top:50%;
	left:50%;
	/*translate(-50%,-50%)的作用是，往上（x轴），左（y轴）移动自身长宽的50%，以使其居于中心位置 */
	transform: translate(-50%,-50%);
	background: #d4a373;
	/*透明度 */
	opacity:0.5;
	border-radius:30px;
	padding:190px 60px;
	
}
.标题{
	position:relative;
	text-align: center;/*居中*/
	color: #fff;
	/*bottom:40px;//距底的像素*/
}

.输入盒子 input{
	background:none;
	outline: none;
	
	border:#b08968 2px solid;
	border-radius:30px;
	padding: 5px 20px;
	margin-top:8px;
	font-size:15px;
	text-align:center;
	color:#fff;
	/*请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。*/
	 transition: 1.4s;/*//这是过渡的秒数 */
}
/*选择鼠标指针浮动在其上的元素，并设置其样式：*/
.输入盒子 input:hover{
	border:#7f5539 2px solid;
}

.登录{
	position:absolute;
	font-size:30px;
	top:10.3cm;
	color:#fffefd;
	opacity:1;
	text-transform: uppercase;
	padding:5px 20px;
	overflow:hidden;
	transition: .3s;
}
/*在每个 <p> 元素的内容之前插入新内容：*/
.登录::before
{
	content: '';
	position:absolute;
	top:2px;
	left:2px;
	bottom:2px;
	width:100%;
	background:rgba(92, 92, 216, 0.1)
}
/*规定属于其父元素的第一个子元素的每个s span 的样式*/
a span:nth-child(1)
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 3px;
	background:linear-gradient(to right,#b08968,#000000);
	animation: span1 2s linear infinite;
}
@keyframes span1{
	0%{
		transform:translateX(-100%);
	}
	100%{
		transform:translateX(100%);
	}
}
	a span:nth-child(2)
{
	position:absolute;
	top:0;
	right:0;
	width: 3px;
	height: 100%;
	background:linear-gradient(to bottom,#b08968,#7f5539);
	animation: span2 2s linear infinite;
	animation-delay: 1s;
}
@keyframes span2{
	0%{
		transform:translateY(-100%);
	}
	100%{
		transform:translateY(100%);
	}


}
.login span:nth-child(3)
{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height: 8px;
	background:linear-gradient(to left,#b08968,#7f5539);
	animation: span3 2s linear infinite;
}
@keyframes span3{
	0%{
		transform:translateX(100%);
	}
	100%{
		transform:translateX(-100%);
	}
}
a span:nth-child(4)
{
	position:absolute;
	top:0;
	left:0;
	width: 3px;
	height: 100%;
	background:linear-gradient(to top,#b08968,#7f5539);
	animation: span4 2s linear infinite;
	animation-delay: 1s;
}
@keyframes span4{
	0%{
		transform:translateY(100%);
	}
	100%{
		transform:translateY(-100%);
	}


}

.登录:hover{
	background: #995f4c;
	color:#fff;
}
.登录:hover>a span{
	background: #995f4c;
}
.图标们{
	position:absolute;
	right:50px;
	margin-top:50px ;
	font-size:18px;
	color:#fff;
	/* border:rgb(161, 60, 60) 2px solid; */
	margin-left:5px;
	transition: .3s;
}
.图标们 i{
	border: #fff 2px solid;
	padding: 5px;
	border-radius: 50%;
}
.图标们 i:hover{
	border: #7f5539 2px solid;
	color:#1779ff;
}
